<template>
  <!-- 单行组件：文本、滑块、slot -->
  <div
    v-if="prefix&&prefixWidth!=0"
    class="any-outsidebar"
  >
    <div
      class="any-prefix"
      :style="prefixWidth?('min-width:'+prefixWidth+';width:'+prefixWidth):''"
    >{{prefix}}</div>
    <!-- 开关 -->
    <el-switch
      v-if="type=='switch'"
      v-model="elValue"
      :active-value="switchTrue"
      :inactive-value="switchFalse"
      :disabled="disabled"
      @change="changeClick"
    ></el-switch>
    <!-- 进度条 -->
    <el-slider
      v-else-if="type=='slider'"
      class="slider-insidebar"
      v-model="elValue"
      :min="sliderMin"
      :max="sliderMax"
      :step="sliderStep"
      :marks="sliderMark"
      :disabled="disabled"
      @change="changeClick"
    ></el-slider>
    <!-- 评分 -->
    <el-rate
      v-else-if="type=='rate'"
      v-model="elValue"
      :max="rateMax"
      :allow-half="rateHalf"
      :disabled="disabled"
      @change="changeClick"
    ></el-rate>
    <!-- 颜色选择器 -->
    <el-color-picker
      v-else-if="type=='color'"
      v-model="elValue"
      size="medium"
      :disabled="disabled"
      @change="changeClick"
    ></el-color-picker>
    <!-- 扩展slot -->
    <slot name="suffix"></slot>
  </div>

  <!-- 单个滑块 -->
  <!-- 开关 -->
  <el-switch
    v-else-if="type=='switch'"
    v-model="elValue"
    :active-value="switchTrue"
    :inactive-value="switchFalse"
    :disabled="disabled"
    @change="changeClick"
  ></el-switch>
  <!-- 进度条 -->
  <el-slider
    v-else-if="type=='slider'"
    class="slider-insidebar"
    v-model="elValue"
    :min="sliderMin"
    :max="sliderMax"
    :step="sliderStep"
    :marks="sliderMark"
    :disabled="disabled"
    @change="changeClick"
  ></el-slider>
  <!-- 评分 -->
  <el-rate
    v-else-if="type=='rate'"
    v-model="elValue"
    :max="rateMax"
    :allow-half="rateHalf"
    :disabled="disabled"
    @change="changeClick"
  ></el-rate>
  <!-- 颜色选择器 -->
  <el-color-picker
    v-else-if="type=='color'"
    v-model="elValue"
    size="medium"
    :disabled="disabled"
    @change="changeClick"
  ></el-color-picker>
</template>

<script>
export default {
  name:"mm-select-switch",
  props: {
    obj: {// InputObj
      type: Object,
      default: function () {
        return null;
      }
    },

    objKey: {// 数据对应InputObj的key值
      type: String,
      default: ""
    },

    prefix: {// 左边的文本内容
      type: String,
      default: null
    },

    prefixWidth: {// 左边的文本宽度：3.6rem、10px、20%等，为0则不显示，为空则自适应
      type: String,
      default: null
    },

    type: {// switch、slider、rate、color
      type: String,
      default: "switch"
    },

    switchOption: {// 对应switch的数据大小限制，如："0-1"、"否-是"
      type: String,
      default: null
    },

    sliderOption: {// 对应slider的数据大小限制
      type: String,
      default: "0-100"
    },

    sliderStep: {// 对应slider的每格长度
      type: Number,
      default: 1
    },

    sliderMark: {// 对应slider的标签显示，如：{100:"100°C"}
      type: Object,
      default: null
    },

    rateMax: {// 对应rate的最大分值
      type: Number,
      default: 5
    },

    rateHalf: {// 对应rate的是否允许半选
      type: Boolean,
      default: false
    },

    disabled: {// 是否不可用
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      elValue: null,
      switchFalse: false,
      switchTrue: true,
      sliderMin: null,
      sliderMax: null
    }
  },

  watch: {
    obj() {
      this.register();
    },

    objKey() {
      this.register();
    },

    type() {
      this.changeClick(null);
    },

    switchOption() {
      if (this.type == "switch") {
        this.setSwitchOption();
        this.changeClick(null);
      }
    },

    sliderOption() {
      if (this.type == "slider") {
        this.setSliderOption();
      }
    }
  },

  mounted() {
    this.register();
    if (this.type == "switch") {
      this.setSwitchOption();
    } else if (this.type == "slider") {
      this.setSliderOption();
    }
  },

  methods: {
    register() {
      let self = this;
      this.obj._watch(this.objKey, function (value) {
        self.elValue = value;
      }, function (value) {
        if (self.type == "switch") {
          if (value == undefined || value == null) {
            value = self.switchFalse;
          }
        }
        return value;
      });
    },

    changeClick(value) {
      this.obj[this.objKey] = value;
      this.$emit("change", value);
    },

    setSwitchOption() {
      if (this.switchOption) {
        let array = this.switchOption.split("-");
        if (array.length == 2) {
          this.switchFalse = array[0];
          this.switchTrue = array[1];
          return;
        }
      }
      this.switchFalse = false;
      this.switchTrue = true;
    },

    setSliderOption() {
      if (this.sliderOption) {
        let array = this.sliderOption.split("-");
        if (array.length == 2) {
          this.sliderMin = Number(array[0]);
          this.sliderMax = Number(array[1]);
          return;
        }
      }
      this.sliderMin = null;
      this.sliderMax = null;
    }
  }
}
</script>

<style scoped>
.any-outsidebar {
  margin: 0.5rem 1rem;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
}

.any-prefix {
  margin-right: 0.5rem;
  font-size: 0.8rem;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.slider-insidebar {
  width: 100%;
}
</style>